<template>
    <div class="wrapper">
        <div class="dis">
            <div class="main">
                <div class="main_a">
                    <div class="">
                        出款手续费
                    </div>
                    <div class="dis" v-if="casRate==''">
                        <button class="btn" @click="configuration(0)">配置</button>
                    </div>
                    <div class="dis loan_box" v-else @click="configuration(0)">
                        {{casRate}}
                    </div>
                </div>
            </div>
        </div>
        <div class="dis">
            <div class="main">
                <div class="main_a">
                    <div class="">
                        交易费率
                    </div>
                    <div class="dis" v-if="creditCardTrate==''">
                        <button class="btn" @click="configuration(1)">配置</button>
                    </div>
                    <div class="dis loan_box_casRate" v-else @click="configuration(1)">
                        {{creditCardTrate}}
                    </div>
                </div>
            </div>
        </div>
        <div class="dis" v-if="channelCode=='CHANNEL_POS_LD_PAY'">
            <div class="main">
                <div class="main_a">
                    <div class="">
                        优惠贷记费率
                    </div>
                    <div class="dis" v-if="ccardTrateYx==''">
                        <button class="btn" @click="configuration(2)">配置</button>
                    </div>
                    <div class="dis loan_box_casRate" v-else @click="configuration(2)">
                        {{ccardTrateYx}}
                    </div>
                </div>
            </div>
        </div>
        <div class="dis" v-if="channelCode=='CHANNEL_POS_QB'">
            <div class="main">
                <div class="main_a">
                    <div class="">
                        微信/支付宝费率
                    </div>
                    <div class="dis" v-if="wxRate==''">
                        <button class="btn" @click="configuration(3)">配置</button>
                    </div>
                    <div class="dis loan_box_casRate" v-else @click="configuration(3)">
                        {{wxRate}}
                    </div>
                </div>
            </div>
        </div>
        <div class="dis"
            v-if="channelCode=='CHANNEL_POS_QB'||channelCode=='CHANNEL_POS_ZF'||channelCode=='CHANNEL_POS_KQ' ">
            <div class="main">
                <div class="main_a">
                    <div class="">
                        聚合扫码成本
                    </div>
                    <div class="dis" v-if="qrSfRate==''">
                        <button class="btn" @click="configuration(4)">配置</button>
                    </div>
                    <div class="dis loan_box_casRate" v-else @click="configuration(3)">
                        {{qrSfRate}}
                    </div>
                </div>
            </div>
        </div>
        <div class="picker">
            <van-popup v-model:show="show" round position="bottom">
                <van-picker show-toolbar :columns="columns" @cancel="onCancel" @confirm="onConfirm" />
            </van-popup>
        </div>
        <div class="dis btn_box">
            <button class="btn" @click="submit">确定</button>
        </div>
    </div>
</template>

<script>
    import {
        selectAgencyConfig,
        updateTerFee
    } from '@/api/terminal'
    import store from '@/store'
    import {
        showToast,
        showConfirmDialog
    } from 'vant'
    export default defineComponent({
        name: 'sateActive',
        setup() {
            const router = useRoute()
            const routers = useRouter()
            const state = reactive({
                channelCode: router.query.channelCode,
                list: [],
                columns: [],
                show: false,
                creditCardTrate: "",
                casRate: "",
                type: 0,
                ccardTrateYx: "",
                wxRate: "",
                qrSfRate: ""
            })
            const onCancel = () => {
                state.show = false
                console.log(state.show)
            }
            const submit = () => {
                console.log(state.creditCardTrate.length, state.creditCardTrate)
                if (state.creditCardTrate == '') {
                    showToast('交易费率不能为空')
                    return
                } else if (state.casRate == '') {
                    showToast('出款手续费不能为空')
                    return
                } else if (state.channelCode == 'CHANNEL_POS_QB') {
                    if (state.wxRate == '') {
                        showToast('微信/支付宝费率不能为空')
                        return
                    }
                } else if (state.channelCode == 'CHANNEL_POS_LD_PAY') {
                    if (state.ccardTrateYx == '') {
                        showToast('优惠贷记费率不能为空')
                        return
                    }
                }
                let parames = {
                    channelCode: router.query.channelCode,
                    terList: router.query.terList,
                    creditCardTrate: state.creditCardTrate,
                    casRate: state.casRate,
                    ccardTrateYx: state.ccardTrateYx,
                    wxRate: state.wxRate,
                    qrSfRate: state.qrSfRate
                }
                if (state.channelCode != 'CHANNEL_POS_LD_PAY') {
                    delete parames.ccardTrateYx
                }
                if (state.channelCode != 'CHANNEL_POS_QB') {
                    delete parames.wxRate
                }
                if (state.channelCode != 'CHANNEL_POS_QB' && state.channelCode != 'CHANNEL_POS_ZF' && state
                    .channelCode != 'CHANNEL_POS_KQ') {
                    delete parames.qrSfRate
                }
                if (state.channelCode == 'CHANNEL_POS_QB' && state.qrSfRate == '') {
                    delete parames.qrSfRate
                }
                updateTerFee(parames).then(res => {
                    showToast('费率变更成功')
                })
            }
            const onConfirm = (e) => {
                state.show = false
                if (state.type == 0) {
                    state.casRate = e.selectedOptions[0].text
                } else if (state.type == 1) {
                    state.creditCardTrate = e.selectedOptions[0].text
                } else if (state.type == 3) {
                    state.wxRate = e.selectedOptions[0].text

                } else if (state.type == 4) {
                    state.qrSfRate = e.selectedOptions[0].text

                } else {
                    state.ccardTrateYx = e.selectedOptions[0].text
                }
            }
            //配置按钮
            const configuration = (e) => {
                state.show = true
                state.columns = []
                state.type = e
                if (e == 0) {
                    for (let i in state.list.payCostRange) {
                        state.columns.push({
                            text: state.list.payCostRange[i],
                            value: i
                        })
                    }
                } else if (e == 1) {
                    for (let i in state.list.rateRange) {
                        state.columns.push({
                            text: state.list.rateRange[i],
                            value: i
                        })
                    }
                } else if (e == 3) {
                    let rateRange = []
                    for (let i = 30; i <= 60; i++) {
                        const value = i / 100;
                        rateRange.push({
                            text: value,
                            value: i
                        })
                        console.log('微信配置', value); // 0, 0.01, 0.02, ..., 0.6
                    }
                    state.columns = rateRange
                } else if (e == 4) {
                    let rateRange = []
                    for (let i = 50; i <= 60; i++) {
                        const value = i / 100;
                        rateRange.push({
                            text: value,
                            value: i
                        })
                        console.log('聚合扫码成本', value); // 0, 0.01, 0.02, ..., 0.6
                    }
                    state.columns = rateRange
                } else {
                    let rateRange = [{
                            text: 0.50,
                            value: 5
                        },
                        {
                            text: 0.51,
                            value: 6
                        },
                        {
                            text: 0.52,
                            value: 7
                        },
                        {
                            text: 0.53,
                            value: 8
                        },
                        {
                            text: 0.54,
                            value: 9
                        },
                        {
                            text: 0.55,
                            value: 10
                        },
                        {
                            text: 0.56,
                            value: 11
                        },
                        {
                            text: 0.57,
                            value: 12
                        },
                        {
                            text: 0.58,
                            value: 13
                        },
                        {
                            text: 0.59,
                            value: 14
                        },
                        {
                            text: 0.60,
                            value: 15
                        }
                    ];
                    state.columns = rateRange
                }
            }
            //获取活动列表
            const getActivityList = () => {
                selectAgencyConfig({
                    channelCode: router.query.channelCode
                }).then(res => {
                    state.list = res.data
                    state.list.payCostRange = state.list.payCostRange.split(',')
                    state.list.rateRange = state.list.rateRange.split(',')
                    console.log(state.list)
                })
            }
            getActivityList()
            return {
                ...toRefs(state),
                configuration,
                getActivityList,
                onCancel,
                onConfirm,
                submit
            }
        }
    })
</script>
<style scoped lang="scss">
    .wrapper {
        background-color: #FFF9F9;
        min-height: 100vh;
        width: 100%;
        height: 100%;
    }

    .main {
        width: 339px;
        height: 50px;
        background: #FFFFFF;
        box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.16);
        border-radius: 6px;
        margin-top: 12px;
        padding: 0px 15px;
        box-sizing: border-box;

        .btn {
            padding: 6px 12px;
            box-sizing: border-box;
            background-color: #FF2828;
            color: #fff;
            font-size: 12px;
            border-radius: 4px;
        }

        .main_a {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            height: 100%;

            .loan_box {
                // width: 10px;
                padding: 2px 3px;
                border-bottom: 1px solid #FF8602;
            }

            .loan_box_casRate {
                padding: 2px 3px;
                border-bottom: 1px solid #C002FF;
            }
        }
    }

    .btn_box {
        position: absolute;
        bottom: 15%;
        transform: translateX(-50%);
        left: 50%;

        .btn {
            width: 339px;
            height: 41px;
            background: #FF2828;
            border-radius: 6px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 15px;
            color: #FFFFFF;
        }
    }

    .picker {
        position: absolute;
        bottom: 0px;
        width: 100%;
    }
</style>